<template>
    <div>
        <panel-head :route="route" />
        <!-- <PanelHead title="菜单管理" description="菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取" /> -->
        <el-button type="primary" :icon="Plus" style="margin: 10px 0;"
            @click="open(null)"
        >新增</el-button>
        <el-table :data="tableData.list" style="width:100%">
            <el-table-column prop="id" label="id" width="100" />
            <el-table-column prop="name" label="名称" width="200" />
            <el-table-column prop="permissionName" label="权限列表" width="auto" />
            <el-table-column label="操作" width="200" >
                <template #default="scope">
                    <el-button type="primary" @click="open(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-info">
            <el-pagination
                v-model:current-page="paginationData.pageNum"
                v-model:page-size="paginationData.pageSize"
                :page-sizes="[10,30,50]" 
                size="small"    
                :background="false"
                layout="sizes, prev, pager, next, total"
                :total="tableData.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog 
            v-model="dialogFormVisible" 
            :before-close="beforeClose"
            title="编辑权限" width="500"
        >
            <el-form ref="formRef"
                :model="form"
                :rules="rules"
                label-width="100"
                label-position="left"
                style="padding: 0 10px;"
                :default-expanded-keys="[2]"
                :default-checked-keys="[4, 5]"
            >
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请填写权限名称"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="permissions">
                    <el-tree
                        ref="treeRef"
                        :data="permissionsData"
                        node-key="id"
                        style="max-width:600px"
                        show-checkbox
                        :default-checked-keys="[4,5]"
                        :default-expanded-keys ="[2]"
                    >
                    
                    </el-tree>
                </el-form-item>
                <el-form-item prop="id" v-show="false">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="comfirm(formRef)">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { userGetMenu, userSetMenu, menuList } from '../../../api'
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';

const route = useRoute()

onMounted(()=>{
    userGetMenu().then(({data})=>{
        console.log(data, 'userGetMenu')
        permissionsData.value= data.data
    })
    getListData()
})

// 页码
const paginationData = reactive({
    pageNum:1,
    pageSize:10
})
// 获取权限列表
const getListData=()=>{
    menuList(paginationData).then(({data})=>{
        console.log(data, 'menuList')
        const{ list, total }= data.data
        tableData.list= list
        tableData.total = total
    })
}
// 打开弹框
const open=(rowdata={})=>{
    dialogFormVisible.value= true
    // 弹窗打开form的过程是异步的
    nextTick(()=>{
        if(rowdata){
            Object.assign(form,{id:rowdata.id, name:rowdata.name})
            treeRef.value.setCheckedKeys(rowdata.permission)
        }
    })
}





// 页码控制
const handleSizeChange=(val)=>{
    paginationData.pageSize=val
    getListData()
}
const handleCurrentChange=(val)=>{
    paginationData.pageNum=val
    getListData()
}




const tableData=reactive({
    list:[],
    total:0
})






// 弹框控制
const dialogFormVisible = ref(false)
const beforeClose=()=>{
    dialogFormVisible.value= false
    // 重置表单
    formRef.value.resetFields()
    // 重置树形图勾选项
    treeRef.value.setCheckedKeys([4, 5])
}





// 表单
const formRef= ref()
const form= reactive({
    id: '',
    name: '',
    permissions: ''
})
// 表单校验规则
const rules=reactive({
    name:[
        {required: true, message:'请填写权限名称', trigger:'blur'},
    ],
})
// 表单提交
const comfirm=async(formEl)=>{
    if(!formEl) return
    await formEl.validate((valid, fields) => {
    if (valid) {
      const permissions= JSON.stringify(treeRef.value.getCheckedKeys())
      userSetMenu({name: form.name, permissions, id: form.id}).then(({data})=>{
    //     console.log('userSetMenu', data)
        beforeClose()
        getListData()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}





// 树形菜单权限数据
const treeRef=ref()
const permissionsData = ref([])


</script>

<style lang="less" scoped>
.pagination-info{
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
</style>